<template>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :immediate-check='false'
      @load="onLoad"
    >
        <van-cell >
          <commentItem @open="$emit('open',$event)" v-for="item in list" :key="item.con_id" :comment="item"></commentItem>
        </van-cell>

    </van-list>
</template>
<script>
import {getCommentList} from "@/api/comment"
import commentItem from "./comment-item.vue"
  export default {
    name: "CommentList",
    components:{
      commentItem
    },
    props: {
      sourceId:{
        type:[String,Number],
        required:true
      },
      list:{
        type:Array,
        default:()=>[]
      },
      type:{
        default:'a',
        validator(val){
          return ['a','c'].includes(val)
        }
      }
    },
    data() {
      return {
        // list: [], // 评论列表
        loading: false, // 上拉加载更多的 loading
        finished: false, // 是否加载结束
        offset:null,
        limit:10
      };
    },
created(){
  this.onLoad()
  this.loading=true
},
    methods: {
     async onLoad() {
        try {
          // 1. 发送请求
          let {data} = await getCommentList({
            type:this.type,
            source:this.sourceId,
            offset:this.offset,
            limit:this.limit
          })
           // 2. 追加数据到列表
          this.list.push(...data.data.results)
         
          this.$emit('huifu',data.data.total_count)
           // 3. 关闭loading
          this.loading=false
            // 4. 判断是否结束
          if(data.data.results.length<this.limit){
              // 4.1 结束了finished 为true
            this.finished=true
          }else{
             // 4.2 页码变化
            this.offset=data.data.last_id
          }
        } catch (error) {
          console.log(error);
        }
      }
    }
  };
</script>